<template>
  <div class="business">
    <div class="banner" :style="{backgroundImage:'url(' + businessbanner+ ')'}">
      <div class="entry">业务入口<div class="entry-en">BUSINESS ENTRANCE</div></div>
      <div class="business-entry">
        <vButton v-for='item in entryButtonData' :key='item.text' @change="clickEntry" :item='item' class="_mr"></vButton>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
import vButton from '../../components/button'
import businessbanner from './img/businessbanner.jpg'
export default {
  data(){
    return {
      businessbanner:businessbanner,
      entryButtonData:[
        {text:'社会招生',active:true,name:'socialEnrollment'},
        {text:'高效模块',active:false,name:'collegeEnrollment'},
        {text:'企业培训及合作',active:false,name:'enterpriseEnrollment'},
      ],
    }
  },
  methods:{
    clickEntry(data){    //入口按钮点击处理
      const obj = this.entryButtonData.filter(item=>{
        return item.text == data.text
      })
      this.entryButtonData = this.entryButtonData.map(item=>{
        if(item.text == data.text){
          item.active = true      //点中的按钮变激活
        }else{
          item.active = false     //其余的都变成不激活
        }
        return item               //把新数组返回并且重新赋值给this.entryButtonData，页面就可以自动渲染
      })
      // 如果能过滤出目标，就用目标的name来跳转
      if(obj[0]) this.$router.push({ name: obj[0].name})
    }
  },
  components:{
    vButton
  }
}
</script>
<style lang="stylus">
.business
  .banner
    width 100%;
    height 480px;
    background pink;
    overflow hidden
    .entry 
      margin 140px 0 52px 120px;
      font-size: 28px;
      line-height: 40px;
      color: #f4f4f4;
      .entry-en
        margin-top 22px;
        font-family: Humanist521BT-Light;
        font-size: 24px;
        line-height: 17px;
        color: #c9c9c9;
    .business-entry
      display flex
      margin-left 120px
      ._mr
        margin-right 10px
</style>
